import { DataTableColumns, NButton, NPopconfirm } from "naive-ui";
import { ref } from "vue";
import { h } from "vue";

export const createColumns = ({ edit, del }): DataTableColumns => {
  return [
    {
      type: "selection",
    },
    {
      title: "用户名",
      key: "name",
      align: "center",
      maxWidth: 100,
      ellipsis: true,
    },
    {
      title: "角色权限",
      key: "ridNames",
      align: "center",
      maxWidth: 100,
      ellipsis: true,
    },
    {
      title: "账号",
      key: "account",
      align: "center",
      maxWidth: 100,
      ellipsis: true,
    },
    {
      title: "密码",
      key: "password",
      align: "center",
      maxWidth: 100,
      ellipsis: true,
    },
    {
      title: "邮箱",
      key: "email",
      align: "center",
      ellipsis: true,
    },
    {
      title: "性别",
      key: "sex",
      align: "center",
      ellipsis: true,
    },
    {
      title: "居住地址",
      key: "life_address",
      align: "center",
      ellipsis: true,
    },
    {
      title: "操作",
      key: "actions",
      align: "center",
      width: 130,
      render(row) {
        return h("div", [
          h(
            NButton,
            {
              type: "success",
              size: "small",
              ghost: true,
              onClick: () => edit(row.uid),
              style: { marginRight: "5px" },
            },
            { default: () => "编辑" }
          ),

          h(
            NPopconfirm,
            {
              onPositiveClick: () => {
                del([row.uid]);
              },
              negativeText: "取消",
              positiveText: "确定",
            },
            {
              trigger: () => {
                return h(
                  NButton,
                  {
                    type: "error",
                    strong: true,
                    size: "small",
                    ghost: true,
                  },
                  { default: () => "删除" }
                );
              },
              default: () => {
                return "确认删除该条数据嘛？";
              },
            }
          ),
        ]);
      },
    },
  ];
};

export const tableSize = [
  {
    label: "较小",
    value: "small",
  },
  {
    label: "适中",
    value: "medium",
  },
  {
    label: "较大",
    value: "large",
  },
];

export const emailOptions = ["@gmail.com", "@163.com", "@qq.com"];

export const createColumnsRole = ({ edit, del }): DataTableColumns => {
  return [
    {
      type: "selection",
    },
    {
      title: "RID",
      key: "rid",
      align: "center",
      width: 80,
    },
    {
      title: "角色名",
      key: "name",
      align: "center",
      maxWidth: 100,
      ellipsis: true,
    },
    {
      title: "菜单权限",
      key: "menuNames",
      align: "center",
      maxWidth: 100,
      ellipsis: true,
    },
    {
      title: "图片权限",
      key: "picAuth",
      align: "center",
      maxWidth: 100,
      ellipsis: true,
    },
    {
      title: "是否默认角色",
      key: "is_default",
      align: "center",
      maxWidth: 100,
      ellipsis: true,
    },
    {
      title: "操作",
      key: "actions",
      align: "center",
      width: 130,
      render(row) {
        return h("div", [
          h(
            NButton,
            {
              type: "success",
              size: "small",
              ghost: true,
              onClick: () => edit(row.rid),
              style: { marginRight: "5px" },
            },
            { default: () => "编辑" }
          ),
          h(
            NPopconfirm,
            {
              onPositiveClick: () => {
                if (row.is_default) {
                  window.$message.error("默认角色不能删除");
                } else {
                  del([row.rid]);
                }
              },
              negativeText: "取消",
              positiveText: "确定",
            },
            {
              trigger: () => {
                return h(
                  NButton,
                  {
                    type: "error",
                    strong: true,
                    size: "small",
                    ghost: true,
                  },
                  { default: () => "删除" }
                );
              },
              default: () => {
                return "确认删除该条数据嘛？";
              },
            }
          ),
        ]);
      },
    },
  ];
};

export const picAuthOptions = [
  { label: "无权限", value: "0" },
  { label: "查看自己图片权限", value: "1" },
  { label: "查看所有图片权限", value: "2" },
];
